<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:tr="http://myfaces.apache.org/trinidad"
        >

<f:view>

<ui:composition template="../pages/initPage.xhtml">

<ui:define name="pageContent">

<!-- ToDo: add validations (input values correct and all present, example: filter without parameter) -->

    <!-- ToDo: add needed partial triggers to re-establish page functionality! (ragging, seq filter, mass limit, regex emzyme, ...)-->


    <h:panelGrid columns="1">
        <!--<hr width="100%"/>-->
        <h1 style="width:100%;">Database on Demand</h1>

        <!-- Introduction section below header, containing references to funding, licence,
             source repository, introduction text, notes... -->
        <h:panelGroup>
            <table style="width:90%;">
                <tr>
                    <td align="left" width="70%">
                        <tr:panelBox inlineStyle="font-weight:bold;" contentStyle="background-color:hsla(3,96%,86%,0.83)">
                            <p style="font-size:18px">This resource has been deprecated and will be removed. If you have questions, please email: pride-dod [at] ebi.ac.uk</p>
                        </tr:panelBox>
                        <br/>
                        <b>Database on Demand</b> is a web-based database pre-processing tool that will
                        generate custom FASTA formatted sequence databases according to a set of
                        user-selectable criteria using the commonly used UniProt/SWISS-PROT and
                        UniProt/TrEMBL databases as source. <b>New:</b> Now includes IPI resources
                        (note that not all filters are available for IPI).
                        <br/><br/>
                        The source is freely available under the
                        <a href="http://www.apache.org/licenses/LICENSE-2.0" target="blank">Apache licence 2.0</a>
                        from its <a href="http://code.google.com/p/database-on-demand/" target="blank">
                        Google code page</a>. For feedback and questions please send an email to
                        <a href="mailto:pride-dod@ebi.ac.uk">pride-dod@ebi.ac.uk</a>.
                        <br/><br/>
                        <b>NOTE:</b> You can use the following regular expressions with the
                        <a href="http://www.matrixscience.com" target="blank">MASCOT</a>
                        search engine to retrieve the accession number and description from
                        the FASTA headers in the result database. For the accession number use
                        <code>">[^|]*|\([^|]*\)|"</code> and for the description use
                        <code>">[^|]*|[^|]*|\(.*\)"</code>
                        <br/><br/>
                        Database on Demand uses the
                        <a target="blank" href="http://genesis.UGent.be/dbtoolkit">DBToolkit</a>
                        software (PubMedID
                        <a target="blank" href="http://www.ebi.ac.uk/citexplore/citationDetails.do?externalId=16030071&amp;dataSource=MED">16030071</a>)
                        for its processing back-end.
                    </td>
                    <td width="15%"/>
                    <td align="center" width="15%">
                        <a href="http://www.bbsrc.ac.uk" target="blank">
                            <img src="../images/bbsrc.gif" alt="BBSRC logo" style="border:none;" height="85px" width="225px"/>
                        </a>
                        <br/>
                        <br/>
                        The development of Database on Demand <br/>
                        was supported by the <a href="http://www.bbsrc.ac.uk" target="blank">BBSRC</a>
                        Tools and Resources Grant: BB/F016255/1.
                    </td>
                </tr>
            </table>
            <br/>
        </h:panelGroup>
        <br/>

        <tr:messages/>

        <!-- INPUT section -->
        <h2>INPUT: database selection, protein filtering, and protein maturation</h2>
        <tr:group>
            <tr:outputText value="Select at least one database as source for your custom Database on Demand.
                              For each source you will be able to add filters, for most of which you can
                              also specify a filter parameter. When specifying multiple entries in a
                              parameter, separate them using commas."/>
            <tr:panelPopup>
                <f:facet name="trigger">
                    <tr:image source="../images/icon_help.gif" inlineStyle="border:none;"/>
                </f:facet>

                <div style="background-color:white;width:400px;">
                    <tr:image source="../images/icon_help.gif" inlineStyle="border:none;"/>

                    <div style="margin:25px;margin-top:9px;">
                        Select a database of your choice from the drop-down menu.
                        Then add it to your list of sources by clicking the "Add as source" button.
                        A table showing your selected databases will appear and will allow you to
                        add filters if you should choose so.<br/>
                        NOTE that the UniProt resource is split up in its components SwissProt and TrEMBL.
                        So, in order to use all of UniProt, one has to select both databases as sources.
                    </div>
                </div>
            </tr:panelPopup>
        </tr:group>
        
        <tr:panelBox id="inputBox" inlineStyle="width:100%;">
            <tr:panelBox inlineStyle="width:100%;">
                <tr:panelHorizontalLayout>
                    <tr:selectOneChoice id="dbSelector" value="#{collectorBean.selectDB}" autoSubmit="true"
                                        unselectedLabel="Choose a database">
                        <f:selectItems value="#{collectorBean.sourceDBSelectList}"/>
                    </tr:selectOneChoice>
                    <tr:commandButton text="Add as source" actionListener="#{collectorBean.addSource}"
                                      partialTriggers="dbSelector" disabled="#{collectorBean.selectDB == null}"/>
                </tr:panelHorizontalLayout>
            </tr:panelBox>
            <br/>
            <tr:table id="inputTable" rowSelection="none"
                      value="#{collectorBean.inputDBs}" var="inputDB"
                      rendered="#{collectorBean.inputDBsSize > 0}">
                <tr:column headerText="Source">
                    <h:outputText value="#{inputDB.sourceDBName}"/>
                </tr:column>
                <tr:column headerText="Filters">
                    <h:outputText value="#{inputDB.filterSize}"/>
                </tr:column>
                <tr:column headerText="optional filter and filter parameter">
                    <tr:panelHorizontalLayout partialTriggers="filterSelector">
                        <tr:panelHorizontalLayout>
                            <tr:selectOneChoice id="filterSelector" autoSubmit="true" immediate="true"
                                                value="#{inputDB.selectedFilter}"
                                                unselectedLabel="Choose a filter"
                                                valueChangeListener="#{inputDB.renderFilterParamInput}">
                                <f:selectItems value="#{inputDB.availableFilters}"/>
                            </tr:selectOneChoice>
                            <tr:panelPopup>
                                <f:facet name="trigger">
                                    <tr:image source="../images/icon_help.gif" inlineStyle="border:none;"/>
                                </f:facet>

                                <div style="background-color:white;width:500px;">
                                    <tr:image source="../images/icon_help.gif" inlineStyle="border:none;"/>

                                    <div style="margin:25px;margin-top:9px;">
                                        From the drop-down box the following filters are available:<br/>
                                        (don't forget to apply them to the resource clicking the + symbol)
                                        <br/><br/>
                                        <dl>
                                            <dt style="font-weight:bold;">Protein accession</dt>
                                            <dd>A list of comma separated UniProt accession
                                                numbers can be provided to which the source
                                                database will be restricted.<br/>
                                                Example: use <em>P38398</em> for protein BRCA1_HUMAN
                                                <br/><br/>
                                            </dd>
                                            <dt style="font-weight:bold;">UniProt keyword</dt>
                                            <dd>If a keyword is provided, then only UniProt
                                                records containing this keyword will be taken
                                                into account for further processing.<br/><br/>
                                            </dd>
                                            <dt style="font-weight:bold;">NCBI TacID</dt>
                                            <dd>Specify a NCBI taxonomy ID to restrict your
                                                database to a particular species.<br/>
                                                Example: use <em>9606</em> for Homo sapiens (Human)
                                                <br/><br/>
                                            </dd>
                                            <dt style="font-weight:bold;">Maturation</dt>
                                            <dd>If selected information (if available) contained
                                                in UniProt records will be used to "mature" the
                                                protein sequence.<br/><br/>
                                            </dd>
                                        </dl>
                                        <b>NOTE:</b> Since most of these filters are dependent on information
                                        rich UniProt records, not all options may be available on all databases.
                                        <br/><br/>
                                        The number in the <em>Filters</em> column of the table indicates how
                                        many filters have already been registered with the resource. Clicking
                                        on the <em>Show/Hide</em> item in the <em>Details</em> column opens up
                                        a sub-table containing all the registered filters and there parameters.
                                    </div>
                                </div>
                            </tr:panelPopup>
                        </tr:panelHorizontalLayout>
                        <tr:switcher facetName="#{inputDB.selectedFilter.type}" defaultFacet="none">
                            <f:facet name="none">
                                <!-- show nothing if no filter is selected -->
                            </f:facet>
                            <f:facet name="default">
                                <tr:panelHorizontalLayout>
                                    <tr:inputText value="#{inputDB.filterParam}"
                                                  columns="40" disabled="false"/>
                                    <tr:commandButton text="+" actionListener="#{inputDB.addFilter}"
                                                      shortDesc="Add filter to the filter list for the current input database"/>
                                </tr:panelHorizontalLayout>
                            </f:facet>
                            <f:facet name="noParam">
                                <tr:panelHorizontalLayout>
                                    <tr:commandButton text="+" actionListener="#{inputDB.addFilter}"
                                                      shortDesc="Add filter to the filter list for the current input database"/>
                                </tr:panelHorizontalLayout>
                            </f:facet>
                        </tr:switcher>
                    </tr:panelHorizontalLayout>
                </tr:column>
                <f:facet name="detailStamp">
                    <tr:panelHorizontalLayout halign="right">
                        <tr:table id="filterTable" rendered="#{not empty inputDB.filters}"
                                  value="#{inputDB.filters}" rowBandingInterval="1"
                                  horizontalGridVisible="false" verticalGridVisible="false"
                                  var="filterRow">
                            <tr:column inlineStyle="border:none;">
                                <h:outputText value="#{filterRow.name}" />
                            </tr:column>
                            <tr:column  inlineStyle="border:none;">
                                <tr:inputText value="#{filterRow.parameter}" columns="20" disabled="true"
                                              contentStyle="background-color:#DEDEDE;"/>
                            </tr:column>
                            <tr:column inlineStyle="border:none;">
                                <tr:commandButton id="filterRemoveButton" text="-"
                                                  action="#{filterRow.action}" immediate="true"/>
                            </tr:column>
                        </tr:table>
                    </tr:panelHorizontalLayout>
                </f:facet>
            </tr:table>
        </tr:panelBox>

        <!-- PROCESSING section -->
        <h2>PROCESSING: enzymatic digest and ragging</h2>
        <tr:group>
            <tr:outputText value="After selecting the input database(s), you can now optionally specify the
                              desired processing steps by selecting one (or more) of the predefined enzymes
                              or defining a regular expression based enzyme of your choice. If required,
                              you can then choose to rag the resulting peptide database."/>
            <tr:panelPopup>
                <f:facet name="trigger">
                    <tr:image source="../images/icon_help.gif" inlineStyle="border:none;"/>
                </f:facet>

                <div style="background-color:white;width:300px;">
                    <tr:image source="../images/icon_help.gif" inlineStyle="border:none;"/>

                    <div style="margin:25px;margin-top:9px;">
                        For more detailed information please visit the
                        <tr:commandLink text=" User manual" action="manual" immediate="true"/>.
                    </div>
                </div>
            </tr:panelPopup>
        </tr:group>
        <tr:panelBox id="processBox"
                     inlineStyle="width:100%;">
            <tr:panelBox id="enzymeSelectorBox" partialTriggers="enzymeSelector enzymeSelectorChoice"
                         inlineStyle="width:100%;">
                <tr:panelHorizontalLayout>
                    <tr:selectOneRadio id="enzymeSelector" value="#{collectorBean.enzymeMethod}"
                                       required="yes" autoSubmit="true" layout="horizontal"
                                       valueChangeListener="#{collectorBean.enzymeTypeSelectionChange}">
                        <f:selectItem itemLabel="select" itemValue="0" itemDescription="Use a pre-configured enzyme"/>
                        <f:selectItem itemLabel="regex" itemValue="1" itemDescription="Define your custom regular-expression driven enzyme"/>
                    </tr:selectOneRadio>
                    <tr:selectOneChoice id="enzymeSelectorChoice"
                                        value="#{collectorBean.selectedEnzyme}"
                                        unselectedLabel="Choose an enzyme"
                                        disabled="#{(collectorBean.enzymeMethod == 1)}"
                                        autoSubmit="true"
                                        valueChangeListener="#{collectorBean.emzymeSelectionChange}">
                        <f:selectItems value="#{collectorBean.enzymeSelectList}"/>
                    </tr:selectOneChoice>
                    <tr:inputText value="#{collectorBean.enzymeName}" columns="10" 
                                  shortDesc="The name of the enzyme"
                                  disabled="#{(collectorBean.enzymeMethod == 0)}"/>
                    <tr:inputText value="#{collectorBean.enzymeCleave}" columns="3"
                                  shortDesc="The definition of the cleavage site"
                                  disabled="#{(collectorBean.enzymeMethod == 0)}"/>
                    <tr:inputText value="#{collectorBean.enzymeRestrict}" columns="3"
                                  shortDesc="The restricting peptides (if any)"
                                  disabled="#{(collectorBean.enzymeMethod == 0)}"/>
                    <tr:inputNumberSpinbox value="#{collectorBean.enzymeMisCleav}" columns="1"
                                           shortDesc="The number of allowed miscleavages"
                                           minimum="0" maximum="10" stepSize="1">
                        <f:validateLongRange minimum="0" maximum="10"/>
                    </tr:inputNumberSpinbox>
                    <h:panelGrid width="170">
                        <tr:selectOneRadio value="#{collectorBean.enzymeCterm}" required="yes" layout="horizontal"
                                           disabled="#{(collectorBean.enzymeMethod == 0)}">
                            <f:selectItem itemLabel="Cterm" itemValue="0" itemDescription="C-terminal cleavage"/>
                            <f:selectItem itemLabel="Nterm" itemValue="1" itemDescription="N-terminal cleavage"/>
                        </tr:selectOneRadio>
                    </h:panelGrid>
                    <h:commandButton value="+" actionListener="#{collectorBean.addEnzyme}"/>
                </tr:panelHorizontalLayout>
            </tr:panelBox>
            <tr:panelGroupLayout >
                <tr:table id="enzymeTable" rendered="#{collectorBean.enzymeListSize > 0}"
                      value="#{collectorBean.enzymeList}"
                      var="enzymeRow" rowSelection="none">
                <tr:column headerText="enzyme name">
                    <h:outputText value="#{enzymeRow.name}"/>
                </tr:column>
                <tr:column headerText="cleavage site">
                    <h:outputText value="#{enzymeRow.cleavePattern}"/>
                </tr:column>
                <tr:column headerText="restrictors">
                    <h:outputText value="#{enzymeRow.restrictors}"/>
                </tr:column>
                <tr:column headerText="miscleavages">
                    <h:outputText value="#{enzymeRow.misCleavages}"/>
                </tr:column>
                <tr:column headerText="Cterm/Nterm">
                    <h:outputText value="#{enzymeRow.CNTermAsString}"/>
                </tr:column>
                <tr:column>
                    <tr:commandButton id="enzymeRemoveButton" text="-"
                                      action="#{enzymeRow.action}" immediate="true"
                                      actionListener="#{collectorBean.resetReportActionListener}"
                                      />
                </tr:column>
            </tr:table>
            </tr:panelGroupLayout>

            <tr:panelBox id="postEnzymeBox" partialTriggers="raggingSelector" inlineStyle="width:100%;">
                <tr:panelHorizontalLayout>
                    <tr:selectBooleanCheckbox id="raggingSelector" value="#{collectorBean.ragging}"
                                              valueChangeListener="#{collectorBean.resetReportListener}"
                                              text="Ragging of database" selected="false" autoSubmit="true"/>
                    <tr:selectOneRadio value="#{collectorBean.raggingMethod}" layout="horizontal"
                                       rendered="#{collectorBean.ragging}">
                        <f:selectItem itemLabel="N-terminal" itemValue="1" itemDescription="Use N-terminal ragging"/>
                        <f:selectItem itemLabel="C-terminal" itemValue="0" itemDescription="Use C-terminal ragging"/>
                    </tr:selectOneRadio>
                    <tr:panelHorizontalLayout rendered="#{collectorBean.ragging}" valign="bottom"
                                              partialTriggers="truncationSelector">
                        <f:facet name="separator">
                            <tr:spacer width="10" height="1"/>
                          </f:facet>
                        <tr:selectBooleanCheckbox id="truncationSelector" value="#{collectorBean.truncate}"
                                                  valueChangeListener="#{collectorBean.resetReportListener}"
                                                  text="Truncate entries" selected="false" autoSubmit="true"/>
                        <tr:outputText value="to" rendered="#{collectorBean.truncate}"/>
                        <tr:inputNumberSpinbox value="#{collectorBean.raggingLimit}"
                                               minimum="10" maximum="1000" stepSize="10"
                                               rendered="#{collectorBean.truncate}">
                            <f:validateLongRange minimum="10" maximum="1000"/>
                        </tr:inputNumberSpinbox>
                        <tr:outputText value="N-terminal residues before ragging" rendered="#{collectorBean.truncate}"/>
                    </tr:panelHorizontalLayout>
                </tr:panelHorizontalLayout>
            </tr:panelBox>
        </tr:panelBox>
        <br/>

        <!-- OUTPUT section -->
        <h2>OUTPUT: post processing filters</h2>
        <tr:group>
            <tr:outputText value="As final processing step you can choose to restrict the results using
                              either a powerful sequence filter or by specifying mass limits peptides.
                              (Note: these filters are applied to the entries in the database, even
                              if no digestion into peptides is performed) "/>
            <tr:panelPopup>
                <f:facet name="trigger">
                    <tr:image source="../images/icon_help.gif" inlineStyle="border:none;"/>
                </f:facet>

                <div style="background-color:white;width:300px;">
                    <tr:image source="../images/icon_help.gif" inlineStyle="border:none;"/>

                    <div style="margin:25px;margin-top:9px;">
                        For more detailed information please visit the
                        <tr:commandLink text=" User manual" action="manual" immediate="true"/>.
                    </div>
                </div>
            </tr:panelPopup>
        </tr:group>
        <tr:panelBox id="outputBox" inlineStyle="width:100%;">
            <tr:panelHorizontalLayout partialTriggers="seqFilterSelector">
                <tr:selectBooleanCheckbox id="seqFilterSelector" value="#{collectorBean.useSequenceFilter}"
                                          valueChangeListener="#{collectorBean.resetReportListener}"
                                          text="Filter on sequence" autoSubmit="true"/>
                <tr:inputText value="#{collectorBean.sequenceFilter}" label="pattern:"
                              rendered="#{collectorBean.useSequenceFilter}" columns="50"/>
            </tr:panelHorizontalLayout>
            <tr:panelHorizontalLayout partialTriggers="massLimitSelector">
                <tr:selectBooleanCheckbox id="massLimitSelector" value="#{collectorBean.useMassLimit}"
                                          valueChangeListener="#{collectorBean.resetReportListener}"
                                          text="Use mass limits" selected="true" autoSubmit="true"/>
                <tr:inputNumberSpinbox id="massLimitStartSelector" value="#{collectorBean.massLimitStart}"
                                       valueChangeListener="#{collectorBean.resetReportListener}"
                                       rendered="#{collectorBean.useMassLimit}" autoSubmit="true"
                                       label="from" minimum="100" maximum="1000000" stepSize="10" columns="4">
                    <f:validateLongRange minimum="100" maximum="1000000"/>
                </tr:inputNumberSpinbox>
                <tr:outputText value="Da" rendered="#{collectorBean.useMassLimit}"/>
                <tr:inputNumberSpinbox id="massLimitEndSelector" value="#{collectorBean.massLimitEnd}"
                                       rendered="#{collectorBean.useMassLimit}" autoSubmit="true"
                                       valueChangeListener="#{collectorBean.resetReportListener}"
                                       label="to" minimum="100" maximum="1000000" stepSize="10" columns="4">
                    <f:validateLongRange minimum="#{collectorBean.massLimitStart + 10}" maximum="1000000"/>
                </tr:inputNumberSpinbox>
                <tr:outputText value="Da"
                               rendered="#{collectorBean.useMassLimit}"/>
            </tr:panelHorizontalLayout>
        </tr:panelBox>
        <br/>
        <br/>

        <!-- Summary section -->
        <h2>TASKS: description of the entire workflow</h2>
        <tr:panelBox id="submitBox"
                     inlineStyle="width:100%;">
            <tr:panelGroupLayout>
                <tr:panelHorizontalLayout>
                    <tr:commandButton id="reportTrigger" text="Generate workflow"
                                      actionListener="#{collectorBean.generateWorkflow}"/>
                    <tr:commandButton id="clearAllTrigger" text="Clear all"
                                      immediate="true"
                                      action="#{collectorBean.clearAllNew}"/>
                    <!--<tr:commandButton text="Show all"-->
                                      <!--immediate="true"-->
                                      <!--actionListener="#{collectorBean.printAllValues}"/>-->
                </tr:panelHorizontalLayout>
                <tr:panelGroupLayout>
                <tr:switcher facetName="#{collectorBean.reportView}" defaultFacet="default">
                    <f:facet name="default">
                        <br/>
                    </f:facet>
                    <f:facet name="ok">
                        <tr:panelGroupLayout>
                            <tr:outputFormatted value="#{collectorBean.formatedReport}"/>
                            <br/>
                            <br/>
                            <tr:panelGroupLayout>
                                <tr:outputText value="Since the creation of your database may take some time, we will inform you by
                                              email when your database is complete. "/>
                                <br/>
                                <tr:outputText value="Please provide your email address so
                                              we can send you a confirmation of your submitted request and
                                              a notice of the completion of your database together with a direct download link."/>
                                <tr:panelHorizontalLayout>
                                    <tr:inputText value="#{collectorBean.email}" columns="30" required="true"
                                                  requiredMessageDetail="A valid email address is required!"
                                                  shortDesc="Enter your email address" label="email:"/>
                                    <tr:commandButton id="submitScriptButton" text="Generate database"
                                                      onclick="alert('Your custom database will now be generated and you will receive a confirmation email shortly.');"
                                                      actionListener="#{collectorBean.submitScript}"/>
                                </tr:panelHorizontalLayout>
                            </tr:panelGroupLayout>
                        </tr:panelGroupLayout>
                    </f:facet>
                    <f:facet name="warn">
                        <tr:panelGroupLayout>
                            <tr:outputFormatted value="#{collectorBean.formatedReportMessage}"/>
                            <tr:commandButton id="genAnyway" text="Generate anyway"
                                              actionListener="#{collectorBean.generateWorkflowForward}"/>
                        </tr:panelGroupLayout>
                    </f:facet>
                    <f:facet name="error">
                        <tr:panelGroupLayout>
                            <tr:outputFormatted value="#{collectorBean.formatedReportMessage}"/>
                        </tr:panelGroupLayout>
                    </f:facet>
                </tr:switcher>
                    </tr:panelGroupLayout>
            </tr:panelGroupLayout>
        </tr:panelBox>

    </h:panelGrid>


</ui:define>

</ui:composition>

</f:view>

</html>